Thank you for participating in our study comparing diagramming tools.
This experiment aims to compare the diagram modeling tool HyLiMo with the diagramming tool draw.io.
Your task is to get familliar with HyLiMo and draw.io and complete a task for HyLiMo and another task for draw.io.
Please follow the following instructions step by step.
Only read the secions of the document you are explicitly asked to.
Read the short UML class diagram instruction found below.
If you are already familiar with UML class diagrams, you might skip this step
Carefully read the instructions for both HyLiMo and draw.io found below.
Because the order of tools needs to be random please click the button below to get assigned to a group:
Carefully read Task 1. When your are ready, start and track your time you take for this task. Please don’t take any breaks while working on it.
When you are finished with the task, note down how much time you took (in seconds), and download the created diagram (for detailed export instructions, see after Step 8).
Repeat Step 4 with Task 2 (and the other tool).
Create a (random) identifier.
Please complete our survey regarding your experience with both tools.
You can find the survey here: https://forms.office.com/e/N4qWdVyxcb
Rename your downloaded diagrams to [UID]-[tool].[old_file_ending] and upload both diagrams here: https://www.dropbox.com/request/gQPBFa3oLLBFyBX2qPsn
While Dropbox requires you to provide a name and e-mail address, you don’t need to enter your real name and e-mail address (e.g. test and test@example.com).
UML class diagrams are visual representations of the structure of a system, showing its classes, attributes, methods, and the relationships between them. They are used to model the static design of a system, making it easier to understand, plan, and communicate its architecture. Class diagrams are commonly employed in software development to illustrate how different components interact and to serve as a blueprint during the design and implementation phases.
In the context of this, the following features are relevant:

+test : int+sqrt(value: double): double
HyLiMo is a hybrid live-synchronized modular diagramming editor.
Diagrams can be edited both textually, using a diagram DSL, and graphically, using the graphical editor, with both views being live synchronized.
Recommended editor: https://hylimo.github.io
Complete documentation: https://hylimo.github.io/docs
Class diagrams always start with classDiagram
classDiagram {
class("Example")
}
Defining a class
class("Example")
Position a class
posclass("Example") layout {
pos = apos(100, 200)
}
apos(x, y): absolute positionrpos(target, x, y): position relative to a targetClass properties/methods
class("Example") {
public {
test : int
sqrt(value : double) : double
}
}
publicprivateprotectedinternaldefault: no visibility symbolCreate associations
House --> Window
-- (undirected)<--> (bidirectional)Add labels (e.g. role/multiplicity) to an association
label function in a with scopeHouse --> Window with {
label("0..*", 0, 10)
}
label([name], [position on the association], [distance to the association])Layout an association
over property in a with scopeHouse --> Window with {
over = start(Position.Left).axisAligned(0.5, apos(10, 10), -0.5, end(Position.Right))
}
start: defines the start position on the outline of the start classend: defines the end position on the outline of the end classaxisAligned: path of the connection, consisting of any amount of axis-aligned segment
draw.io is a graphical diagramming tool.
Recommended editor: https://app.diagrams.net
+ example : int- sqrt(value : double) : double+: public#: protected~: package/internal-: privateCreate a class diagram, with the random tool, for a simple online store:
Store class with storeId: int and name: stringCustomer class withcustomerID: int, name: string, and email: string.Product class with productID: int, name: string, and price: double.Order class that connects customers with their purchased products and has the attributes orderID: int, orderDate: date, and totalPrice: int.Design a class diagram, with the other tool, for a school management system:
School class with schoolID: int, name: string, and address: string.Student class with attributes studentID: int, name: string, and grade: int.Teacher class with attributes teacherID: int, name: string, and subject: string.Class class with following attributes: classID: int and roomNumber: int.